class CreateBannerObj {

    constructor(element, arrey) {
        this.ele = element;
        this.arr = arrey;

        this.oUlLis;
        this.oOlLis;
        this.length = this.arr.length;
        this.liWidth;
        this.index = 1;
        this.oUl;
        this.oOl;
        this.time;
        this.bool = true;

    }

    init(){
        this.setPage();
        this.autoLoop();
        this.setMouse();
        this.setClick();
        this.hide();
    }

    
    //动态生成页面
    setPage() {
        const oBanner=document.querySelector('.banner');
        const oXb=oBanner.querySelector('.xb');
        const oCenter=oXb.querySelector('.center');
        // 创建div，其中有两个a标签
        const oDiv = document.createElement('div');
        oDiv.innerHTML = `<a href="Javascript:;" name="left">&lt;</a><a href="Javascript:;" name="right">&gt;</a>`;

        // 创建ul  ol标签对象
        const oUl = document.createElement('ul');
        const oOl = document.createElement('ol');

        this.oUl = oUl;
        this.oOl = oOl;

        let oUlStr = '';
        let oOlStr = '';

        this.arr.forEach( (item, key) => {
            oUlStr += `<li><img src=../images/${item.name}></li>`;
            oOlStr += key === 0 ? `<li class="active" name="focus" num="${key}"></li>` 
            : `<li name="focus" num="${key}"></li>`;
        })

        console.log(this.arr);

        oUl.innerHTML = oUlStr;
        oOl.innerHTML = oOlStr;

        // 将生成的内容写入标签中
        oCenter.appendChild(oUl);
        oCenter.appendChild(oOl);
        oCenter.appendChild(oDiv);
        oXb.appendChild(oCenter);
        oBanner.appendChild(oXb);
        //获取所有的 ul>li   ol>li
        this.oUlLis = oUl.querySelectorAll('li');

        this.oOlLis = oOl.querySelectorAll('li');


        // 克隆
        const cloneFirst = this.oUlLis[0].cloneNode(true);
        const cloneLast = this.oUlLis[this.length - 1].cloneNode(true);

        this.liWidth = this.oUlLis[0].offsetWidth;

        oUl.appendChild(cloneFirst);
        oUl.insertBefore(cloneLast, this.oUlLis[0]);

        oUl.style.width = (this.length + 2) * this.liWidth + 'px';
        oUl.style.left = -this.liWidth+ 'px';
    }



    //自动轮播
    autoLoop() {
        this.time = setInterval( () => {
            // 变量++
            this.index++;

            this.setFocusStyle();

            move(this.oUl, { left: -this.index * this.liWidth}, this.loopEnd.bind(this));
        }, 3000)

        // 运动终止执行函数

    }
    loopEnd() {

        if (this.index === this.length + 2 - 1) {
            this.index = 1;
            this.oUl.style.left = -this.index * this.liWidth + 'px';
        } else if (this.index === 0) {
            this.index = this.length + 2 - 1 - 1;
            this.oUl.style.left = -this.index * this.liWidth + 'px';
        }
        this.bool = true;
    }

    // 设置焦点事件
    setFocusStyle() {
        this.oOlLis.forEach( (item) => {
            item.classList.remove('active');
        })

        if (this.index === this.length + 2 - 1) {
            this.oOlLis[0].classList.add('active');
        } else if (this.index === 0) {
            this.oOlLis[this.oOlLis.length - 1].classList.add('active');
        } else {
            this.oOlLis[this.index - 1].classList.add('active');
        }

    }

    // 鼠标移入移出
    setMouse() {
        this.ele.addEventListener('mouseenter', () => {
            clearInterval(this.time);
        })
        this.ele.addEventListener('mouseleave', () => {
            this.autoLoop();
        })
    }

    // 设定点击事件
    setClick() {
        this.ele.addEventListener('click', e => {
            if (e.target.getAttribute('name') === 'left') {
                if (this.bool) {
                    this.bool = false;
                } else {
                    return;
                }
                this.index--;
                this.setFocusStyle();
                move(this.oUl, { left: -this.index * this.liWidth }, this.loopEnd.bind(this));
            } else if (e.target.getAttribute('name') === 'right') {
                if (this.bool) {
                    this.bool = false;
                } else {
                    return;
                }
                this.index++;
                this.setFocusStyle();
                move(this.oUl, { left: -this.index * this.liWidth }, this.loopEnd.bind(this));
            } else if (e.target.getAttribute('name') === 'focus') {
                if (this.bool) {
                    this.bool = false;
                } else {
                    return;
                }

                this.index = e.target.getAttribute('num')-0+1;
                console.log(this.index);

                this.setFocusStyle();
                move(this.oUl, { left: -this.index * this.liWidth}, this.loopEnd.bind(this) );
            }

        })
    }


    // 浏览器最小化事件
    hide() {
        document.addEventListener('visibilitychange', () => {
            if (document.visibilityState === 'hidden') {
                clearInterval(this.time);
            } else if (document.visibilityState === 'visible') {
                this.autoLoop();
            }
        })
    }

}